@import "../../assets/base.scss";

.chat-item {
    width: 100%;
    margin: 36px 0;
    .image-render {
        img {
            width: 200px;
            height: 200px;
        }
    }
    .other-file-render {
        font-size: 16px;
        color: $blue;
        text-decoration:none;
        .icon {
            font-size: 20px;
        }
    }
    .msg-render {
        max-width: 60%;
        font-size: 14px;
        word-wrap:break-word;
        .invitingCard {
            padding: 10px 0;
            text-align: center;
            input {
                margin: 10px 0 0;
                padding: 4px 20px;
            }
        }
    }
    .UserAvatar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .otherchat {
        width: 100%;
        position: relative;
        .UserAvatar {
            left: 10px;
            cursor: pointer;
        }
        .nt {
            font-size: 14px;
            left: 60px;
            top: -26px;
            position: absolute;
            color: #686868;
            span {
                padding-right: 6px;
            }
            span:nth-child(2) {
                font-size: 10px;
            }
        }
        .msg-render, .image-render, .other-file-render {
            float: left;
            margin-left: 60px;
            padding: 6px 8px;
            background-color: $other-msg-color;
            border-radius: 6px;
        }
    }
    .mychat {
        width: 100%;
        position: relative;
        .UserAvatar {
            right: 10px;
        }
        .nt {
            font-size: 14px;
            right:60px;
            top: -26px;
            position: absolute;
            color: #686868;
            span {
                padding-left: 6px;
            }
            span:nth-child(1) {
                font-size: 10px;
            }
        }
        .msg-render, .image-render, .other-file-render {
            float: right;
            margin-right: 60px;
            padding: 6px 8px;
            background-color: $my-msg-color;
            border-radius: 6px;
        }
    }
}